<template>
  <div class="colorbar-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <s-colorbar title="colorbar图例" :color-level="5" :colorbar-text="{topText: '优', centerText: '中', bottomText: '差'}" :range="{min:100,max:500}"></s-colorbar>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in props" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import SColorbar  from '../../components/diy-components/Colorbar/Colorbar'
  export default {
    name: 'ColorbarDemo',
    // components: {
    //   SColorbar
    // },
    data() {
      return {
        props: [
          {
            name: 'colors',
            desc: "默认值：['#0B2C7B', '#116087', '#1A9199', '#1A9199', '#12C33F', '#11DF01','#77F204', '#ECFB02', '#FAD50B', '#E8B712', '#EA8B1D', '#CD6D33','#C1533A']。colorbar显示的渐变颜色集。"
          },
          {name: 'colorLevel', desc: '默认值：13。颜色分为多少级。'},
          {name: 'title', desc: '默认值："标题"。colorbar的title，显示在colorbar的顶部。'},
          {name: 'colorbarText', desc: "默认{ topText: '高', centerText: '中', bottomText: '低' }。colorbar右侧显示的文字"},
          {name: 'range', desc: 'colorbar右侧想显示的范围。'},
        ],
      }
    },
    methods: {

    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.colorbar-demo-wrapper{
  width:100%;
  height:100%;
}

</style>
